<template>
	<view class="zone">
		<Header title="收款账户"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">

				<view class="erweima">
					<image class="gcode" src="http://image.qxgm.site/tdz/img/my/mg-14.png" mode="widthFix"></image>
				</view>
				<view class="etip">
					提示:支付宝作为唯一收款账户,只可绑定一次,不可修改
				</view>

				<view class="title">
					<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
					<text>请仔细填写收款信息</text>
					<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
				</view>

				<view class="shoubox">
					<view class="sp">
						收款人姓名
					</view>
					<view class="inpt">
						<input type="text" placeholder-class="pipt" :disabled="act" class="ipti" v-model="name"
							placeholder="输入正确姓名">
					</view>
					<view class="sp">
						收款人账号
					</view>
					<view class="inpt">
						<input type="text" placeholder-class="pipt" :disabled="act" class="ipti" v-model="ali_account"
							placeholder="输入正确账号">
					</view>


					<u-button :plain="true" :class="[act?'active' :' ']" @click="submits" class="onePress"
						:hair-line="false" hover-class="none" :throttle-time="1000">
						{{act?'已绑定':'确认绑定'}}
					</u-button>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				ali_account: '',
				act: false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 获取信息
			async getUserInfo() {
				let res = await this.$http.index.accountAlibild()

				if (!res.data.account_name) {
					this.act = false
				} else {
					this.name = res.data.account_name
					this.ali_account = res.data.account_num
					this.act = true
				}
		
			},
			// 提交
			async submits() {
				if (this.name == '' || this.name == null) {
					this.$u.toast('收款人姓名不能为空')
				} else if (this.ali_account == '' || this.ali_account == null) {
					this.$u.toast('支付宝账号不能为空')
				} else if (!/(^1[3-9]\d{9}$)|(^[\w\d-]+(\.[\w\d-]+)*@[\w\d-]+(\.[\w\d-]+)+$)/.test(this.ali_account)) {
					this.$u.toast('支付宝账号不合法');
				} else if (!!this.act) {
					this.$u.toast('已绑定');
				} else {
					let res = await this.$http.index.accountAlibild2({
						real_name: this.name,
						account: this.ali_account
					})
					this.$u.toast(res.msg)
					if (res.code == 1) {
						this.getUserInfo()
					}
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		height: calc(100vh - 97px);
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 10px 0px 0;
		border-bottom: 6px solid #b0a3a1;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}



	.erweima {
		display: block;
		margin: 0 auto;
		width: 57%;
		background: url(http://image.qxgm.site/tdz/img/jiaoliu/mg-01.png) no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 10%;
	}

	.gcode {
		width: 100%;
	}

	.etip {
		margin: 10px 0px 3vh;
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		background: url(http://image.qxgm.site/tdz/img/my/mg-15.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		padding: 4px 0 9px;
	}

	.sp {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		margin-bottom: 12px;
	}

	.inpt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		border: 1px solid rgba(51, 51, 51, 0.95);
		border-radius: 1px;
		margin: 0 0px 12px;
		padding: 12px 0;
		box-sizing: border-box;
		width: 100%;
	}

	.ipti {
		width: 100%;
		text-align: center;
	}

	.pipt {
		font-size: 17px;
		text-align: center;
		width: 100%;
	}

	.onePress {
		display: block;
		margin: 0 auto;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fefbca;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.shoubox {
		background: linear-gradient(0deg, #F0E9E4, #F5F1EB);
		border-radius: 1px;
		margin: 0 12px;
		border-top: 15px solid #c9bfc3;
		border-bottom: 15px solid #c9bfc3;
		padding: 4vh 14px 5vh;
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px 0 15px;

		image {
			width: 18%;
		}

		text {
			font-size: 18px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.active {
		filter: grayscale(1);
	}
</style>